import React, { Component } from 'react'
import TodoItem from './TodoItem'
import PropsTypes from 'prop-types'

export default class TodoList extends Component {
    static propTypes = {
        todos: PropsTypes.arrayOf(PropsTypes.shape({
            id: PropsTypes.number.isRequired,
            title: PropsTypes.string.isRequired,
            isCompleted: PropsTypes.bool.isRequired
        })).isRequired,
        onCompletedChange: PropsTypes.func
    }
    render() {
        return (
            <ul>
                {
                    this.props.todos.map(todo => {
                        return (
                            // <TodoItem
                            //     id={todo.id}
                            //     key={todo.id}
                            //     title={todo.title}
                            //     isCompleted={todo.isCompleted}
                            // />
                            <TodoItem
                                key={todo.id}
                                {...todo}     // 这样会全部传递
                                onCompletedChange={this.props.onCompletedChange}
                            />
                        )
                    })
                }
            </ul>
        )
    }
}
